<template>
  <!-- 登录状态 -->
  <el-container class="app-container" v-if="this.$store.state.islogin">
    <el-aside class="app-container-aside">
      <!-- 左边菜单的开始 -->
      <el-row>
        <el-col :span="24">
          <h5>五彩艺术学校</h5>
          <el-menu
            default-active="1"
            background-color="rgba(52, 54, 90, 1)"
            text-color="#fff"
            active-text-color="red"
          >
            <el-menu-item index="1">
              <span @click="goTo('home')" slot="title">首页</span>
            </el-menu-item>
            <el-submenu index="2">
              <template slot="title">
                <span>展示营销</span>
              </template>
              <el-menu-item-group>
                <el-menu-item @click="goTo('showOff-item1')" index="2-1">动态分类</el-menu-item>
                <el-menu-item @click="goTo('showOff-item2')" index="2-2">动态列表</el-menu-item>
                <el-menu-item @click="goTo('showOff-item3')" index="2-3">关于学校</el-menu-item>
              </el-menu-item-group>
              <el-submenu index="2-4">
                <template slot="title">
                  <span @click="goTo('showOff-item4')">意向学员</span>
                </template>
                <el-menu-item @click="goTo('showOff-item4-m1')" index="2-4-1">意向学员删除记录</el-menu-item>
                <el-menu-item @click="goTo('showOff-item4-m2')" index="2-4-2">意向学员添加</el-menu-item>
              </el-submenu>
            </el-submenu>
            <el-submenu index="3">
              <template slot="title">
                <span>教务教学</span>
              </template>
              <el-submenu index="3-1">
                <template slot="title">
                  <span @click="goTo('education-item1')">老师管理</span>
                </template>
                <el-menu-item @click="goTo('education-item1-m1')" index="3-1-1">添加老师</el-menu-item>
                <el-menu-item @click="goTo('education-item1-m2')" index="3-1-2">老师简介</el-menu-item>
              </el-submenu>
            </el-submenu>
            <el-submenu index="4">
              <template slot="title">
                <span>财务中心</span>
              </template>
              <el-submenu index="4-1">
                <template slot="title">
                  <span @click="goTo('finance-item1')">订单--课程订单</span>
                </template>
                <el-menu-item @click="goTo('finance-item1-m1')" index="4-1-1">课程订单详情</el-menu-item>
              </el-submenu>
              <el-submenu index="4-2">
                <template slot="title">
                  <span @click="goTo('finance-item2')">订单--商品订单</span>
                </template>
                <el-menu-item @click="goTo('finance-item2-m1')" index="4-2-1">商品订单详情</el-menu-item>
              </el-submenu>
              <el-menu-item-group>
                <el-menu-item index="4-3">
                  <span @click="goTo('finance-item3')">订单--账户订单</span>
                </el-menu-item>
                <el-menu-item index="4-4">
                  <span @click="goTo('finance-item4')">已删除订单</span>
                </el-menu-item>
                <el-menu-item index="4-5">
                  <span @click="goTo('finance-item5')">收入管理</span>
                </el-menu-item>
                <el-menu-item index="4-6">
                  <span @click="goTo('finance-item6')">工资结算</span>
                </el-menu-item>
              </el-menu-item-group>
            </el-submenu>
            <el-submenu index="5">
              <template slot="title">
                <span>统计对比</span>
              </template>
              <el-menu-item-group>
                <el-menu-item @click="goTo('statistics-item1')" index="5-1">业绩统计</el-menu-item>
                <el-menu-item @click="goTo('statistics-item2')" index="5-2">课消统计</el-menu-item>
              </el-menu-item-group>
            </el-submenu>
            <el-submenu index="6">
              <template slot="title">
                <span>系统设置</span>
              </template>
              <el-menu-item-group>
                <el-menu-item @click="goTo('system-item1')" index="6-1">学校信息设置</el-menu-item>
                <el-menu-item @click="goTo('system-item2')" index="6-2">校区设置</el-menu-item>
                <el-menu-item @click="goTo('system-item3')" index="6-3">规则设置</el-menu-item>
                <el-menu-item @click="goTo('system-item4')" index="6-4">个人中心</el-menu-item>
              </el-menu-item-group>
            </el-submenu>
          </el-menu>
        </el-col>
      </el-row>
      <!-- 左边菜单的结束 -->
    </el-aside>
    <el-container>
      <router-view></router-view>
    </el-container>
  </el-container>
  <!-- 未登录状态 -->
  <section v-else>
    <router-view></router-view>
  </section>
</template>
<script>
export default {
  methods: {
    goTo(path) {
      // 实现路由跳转
      // path / /introduce /product/123
      this.$router.push({ path });
    },
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {
    // 是否有登录状态
    if (localStorage.getItem("loginName")) {
      this.$store.state.islogin = true;
      this.$store.state.loginName = localStorage.getItem("loginName");
      if (
        this.$route.path == "/" ||
        this.$route.path == "/login"
      ) {
        this.$router.push("home");
      }
    } else {
      this.$store.state.islogin = false;
      this.$router.push(this.$router.history._startLocation);
    }
  },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {
    // 登录状态
    if (localStorage.getItem("loginName")) {
      this.$store.state.islogin = true;
    } else {
      this.$store.state.islogin = false;
      this.$router.push("login");
    }
  }, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>

<style>
/* 初始化样式 */
* {
  margin: 0px;
  padding: 0px;
  box-sizing: border-box;
}
html,
body,
#app,
.app-container {
  height: 100%;
}
.app-container-aside {
  width: 187px !important;
  background-color: rgba(52, 54, 90, 1);
}
.app-container-aside::-webkit-scrollbar {
  display: none;
}
.app-container-aside h5 {
  color: #e0dfdf;
  margin-top: 30px;
  line-height: 60px;
  text-align: center;
  font-size: 16px;
}
.el-menu {
  border-right: 0 !important;
}
.el-menu-item-group__title {
  padding: 0 !important;
}
.el-menu span {
  display: inline-block;
  width: 100%;
  height: 100%;
}
.el-col > .el-menu > .el-submenu {
  min-height: 60px !important;
  line-height: 60px !important;
}
.el-col > .el-menu > .el-submenu > .el-menu--inline > .el-submenu {
  min-height: 40px !important;
  line-height: 40px !important;
}
.el-col
  > .el-menu
  > .el-submenu
  > .el-menu--inline
  > .el-submenu
  > .el-submenu__title {
  height: 40px !important;
  min-height: 40px !important;
  line-height: 40px !important;
}
.el-header {
  height: 65px !important;
}
.el-main {
  background: rgb(240, 242, 245);
}
.el-menu {
  border-right: 0 !important;
}
.el-menu-item {
  height: 40px !important;
  line-height: 40px !important;
  min-width: 183px !important;
  text-align: left !important;
}
</style>